<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.picker.min.js"></script>
    <script src="js/mui.poppicker.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/mui.picker.min.css" rel="stylesheet"/>
    <link href="css/mui.poppicker.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <style>
        body{
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="mui-bar mui-bar-nav layout-bg">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
            <h1 class="mui-title">提现申请</h1>
        </header>

        <div class="withdrawals-box layout-gap">
            <form class="withdrawals-data">
                <div class="bor-b mui-overflow">
                    <div class="mui-flex">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">银行</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input is-bank" type="text" readonly name="bank" value="" placeholder="请选择银行" />
                        </div>
                        <div class="cell fixed">
                            <span class="mui-icon mui-icon-arrowright with-right-arrow"></span>
                        </div>
                    </div>
                </div>

                <div class="bor-b mui-overflow">
                    <div class="mui-flex">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">银行卡号</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="number" name="bank_number" value="" placeholder="请填写银行卡卡号" />
                        </div>
                    </div>
                </div>

                <div class="bor-b mui-overflow">
                    <div class="mui-flex">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">开户行</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input account-holder" type="text" readonly name="account_holder" value="" placeholder="请选择开户行" />
                        </div>
                        <div class="cell fixed">
                            <span class="mui-icon mui-icon-arrowright with-right-arrow"></span>
                        </div>
                    </div>
                </div>

                <div class="bor-b mui-overflow">
                    <div class="mui-flex">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">姓名</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="text" name="name" value="" placeholder="请填写姓名" />
                        </div>
                    </div>
                </div>
					
                <div class="bor-b mui-overflow">
                    <div class="mui-flex">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">提现金额</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="text" name="money" value="" placeholder="请填写提现金额" />
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <button type="button" class="pay-btn layout-bg">立即申请提现</button>
    </div>

    <script>
        $(function() {
            var bank_picker = new mui.PopPicker();

            bank_picker.setData(
                [
                    {value:'zz',text:'789'},
                    {value:'zz',text:'456'},
                    {value:'zz',text:'123'}
                ]
            );

            var holder_picker = new mui.PopPicker();

            holder_picker.setData(
                [
                    {value:'zz',text:'12345'},
                    {value:'zz',text:'54321'},
                    {value:'zz',text:'99999'}
                ]
            );

            //  选择银行
            $('.is-bank').on('click', function () {
                var $this = $(this);

                bank_picker.show(function () {
                    var itemCallback = bank_picker.getSelectedItems();

                    $this.val(itemCallback[0].text);
                });
            });

            // 选择开户行
            $('.account-holder').on('click', function() {
                var $this = $(this);

                holder_picker.show(function () {
                    var itemCallback = holder_picker.getSelectedItems();

                    $this.val(itemCallback[0].text);
                });
            });

            $('.pay-btn').on('click', function() {
                var param = $('.withdrawals-data').serializeObject();
                if ($.trim(param.bank) == '' || $.trim(param.bank_number) == '' || $.trim(param.account_holder) == '' || $.trim(param.name) == '' || $.trim(param.money) == '') {
                    mui.toast('请完善信息！');
                    return;
                }

                $.ajax({

                })
            })
        })
    </script>
</body>
</html>